<template>
  <div class="login">
    <div class="login-img">
      <van-image
        round
        width="10rem"
        height="10rem"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2440640945-D7D16684CA4E8D9F4B9B05DB5AD1ED70%2F0%3Ffmt%3Djpg%26size%3D31%26h%3D553%26w%3D787%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642129080&t=0ab1d7468d5e590ede312d38dda072c7"
      />
    </div>

    <div class="login-from">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button
            round
            block
            type="info"
            native-type="submit"
          >提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      // 登录数据
      loginlist: [],
    };
  },
  methods: {
    async onSubmit(values) {
      // console.log('submit', values);
      const res = await this.$http.login({
        account: this.username,
        password: this.password,
      });
      // console.log(res);
      this.loginlist = res.data.data;
      // console.log(this.loginlist);
      localStorage.token = this.loginlist.token;
      this.$router.push("/home");

      
    },
  },
};
</script>
<style lang="scss">
.login {
  .login-img {
    .van-image {
      margin: 13% 30%;
    }
  }
}
</style>